<template>
	<zh-col :span="span" :offset="offset" :push="push" :pull="pull" :tag="tag">
		<div :class="layout === 'between' ? 'flex-container' : layout === 'start' ? 'flex-container-start' : 'flex-container-end'">
			<div style="width: 100%" class="flex-container-start">
				<zh-button :disabled="getDisabled()" buttonType="query" :formRef="formRef" :tableRef="tableRef" :data="queryParam" @click="queryBtn">
					查询
				</zh-button>
				<zh-button
					:disabled="getDisabled()"
					v-if="props.showReset"
					buttonType="reset"
					:formRef="formRef"
					:tableRef="tableRef"
					@click="clearBtn"
				></zh-button>
				<el-link v-if="showAdvanced" type="primary" @click="toggleAdvanced" style="margin-left: 8px">
					{{ state.advanced ? '收起' : '展开' }}
					<el-icon v-if="state.advanced"><ele-ArrowUp /></el-icon>
					<el-icon v-else><ele-ArrowDown /></el-icon>
				</el-link>
			</div>
			<div style="margin-left: 10px; width: 100%" class="flex-container-end">
				<slot />
			</div>
		</div>
	</zh-col>
	<zh-col :span="24" v-if="showAdvanced && state.advanced">
		<zh-row :span="theSpan" style="background-color: #f8f9fb; margin: 0 0 10px 0; padding-top: 10px">
			<slot name="moreQuery" />
		</zh-row>
	</zh-col>
</template>
<script lang="ts" setup name="zh-form-query-button">
import { formItemProps, itemProps } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...itemProps, // 基础属性
	...formItemProps,
	formSpan: Number,
	//是否显示 展开收缩图标
	showAdvanced: {
		type: Boolean,
		default: false,
	},
	//是否显示重置按钮
	showReset: {
		type: Boolean,
		default: false,
	},
	formRef: Object,
	tableRef: Object,
	queryParam: Object,
	layout: {
		type: String,
		default: 'between', //start end
	},
});
const emit = defineEmits(['queryClick', 'reset']);
let golbalProps: any = inject('golbalProps', {});
const state = reactive({
	advanced: false,
});
const theSpan = computed(() => {
	if (props.formSpan) {
		return props.formSpan;
	}
	return golbalProps.span;
});
//获取可编辑设置
const getDisabled = () => {
	if (props.disabled === null || props.disabled === undefined) {
		return golbalProps.disabled;
	} else {
		return props.disabled;
	}
};
const queryBtn = () => {
	emit('queryClick');
};
const clearBtn = () => {
	emit('reset');
};
const toggleAdvanced = () => {
	state.advanced = !state.advanced;
};
</script>
<style lang="scss" scoped>
.flex-container {
	display: flex;
	justify-content: space-between;
}
.flex-container-end {
	display: flex;
	justify-content: flex-end;
}
.flex-container-start {
	display: flex;
	justify-content: flex-start;
}
</style>
